doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="height=device-height, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible" content="ie=edge")
    title LiteChat_Frame（轻聊天气泡框架）
    link(rel="stylesheet" type="text/css" href="../css/litewebchat.min.css")
    link(rel="stylesheet" type="text/css" href="../css/litewebchat_input.min.css")
    style.
      /* 全局 */

      html,
      body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      }

      .lite-chatmaster {
      height: 100%;
      width: 100%;
      }

      ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 3px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
      }
  body
    // 主容器
    .lite-chatmaster
      .lite-chatbox
      .lite-chattools
        #emojiMart.lite-chatbox-tool(style="display:none")
        #toolMusk(style="display:none")
      .lite-chatinput
        hr.boundary
        button#emojiBtn.tool-button.float-left(title="表情" type="button")
          svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24")
            path(d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10")
            path(d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0")
        button#imageBtn.tool-button.float-left(title="插入图片" type="button")
          svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512")
            // Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
            path(d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z")
        button#fileBtn.tool-button.float-left(title="发送文件" type="button")
          svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512")
            // Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
            path(d="M527.9 224H480v-48c0-26.5-21.5-48-48-48H272l-64-64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h400c16.5 0 31.9-8.5 40.7-22.6l79.9-128c20-31.9-3-73.4-40.7-73.4zM48 118c0-3.3 2.7-6 6-6h134.1l64 64H426c3.3 0 6 2.7 6 6v42H152c-16.8 0-32.4 8.8-41.1 23.2L48 351.4zm400 282H72l77.2-128H528z")
        button#editFullScreen.tool-button.float-right(title="全屏编辑" type="button")
          svg(svg, xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024")
            path(d="M17.066667 2.844444C11.377778 2.844444 8.533333 5.688889 5.688889 8.533333 2.844444 11.377778 0 14.222222 0 19.911111v364.088889c0 2.844444 0 5.688889 2.844444 5.688889h5.688889l122.311111-122.311111 164.977778 164.977778c2.844444 2.844444 8.533333 5.688889 11.377778 5.688888 5.688889 0 8.533333-2.844444 11.377778-5.688888l110.933333-110.933334c2.844444-2.844444 5.688889-8.533333 5.688889-11.377778 0-5.688889-2.844444-8.533333-5.688889-11.377777l-159.288889-170.666667L389.688889 8.533333c2.844444-2.844444 2.844444-2.844444 0-5.688889 0-2.844444-2.844444-2.844444-2.844445-2.844444L17.066667 2.844444zM17.066667 1024c-5.688889 0-8.533333-2.844444-11.377778-5.688889-2.844444-2.844444-5.688889-8.533333-5.688889-11.377778V640c0-2.844444 0-5.688889 2.844444-5.688889h5.688889l122.311111 122.311111 164.977778-164.977778c2.844444-2.844444 8.533333-5.688889 11.377778-5.688888 5.688889 0 8.533333 2.844444 11.377778 5.688888l110.933333 110.933334c2.844444 2.844444 5.688889 8.533333 5.688889 11.377778s-2.844444 8.533333-5.688889 11.377777l-164.977778 164.977778 119.466667 119.466667c2.844444 2.844444 2.844444 2.844444 0 5.688889 0 2.844444-2.844444 2.844444-5.688889 2.844444L17.066667 1024zM1006.933333 2.844444c5.688889 0 8.533333 2.844444 11.377778 5.688889 2.844444 2.844444 5.688889 5.688889 5.688889 11.377778v364.088889c0 2.844444 0 5.688889-2.844444 5.688889h-5.688889l-122.311111-122.311111-164.977778 164.977778c-2.844444 2.844444-8.533333 5.688889-11.377778 5.688888-5.688889 0-8.533333-2.844444-11.377778-5.688888l-110.933333-110.933334c-2.844444-2.844444-5.688889-8.533333-5.688889-11.377778 0-5.688889 2.844444-8.533333 5.688889-11.377777l164.977778-164.977778L640 14.222222c-2.844444-2.844444-2.844444-2.844444 0-5.688889-5.688889-8.533333-2.844444-8.533333-2.844444-8.533333l369.777777 2.844444z m0 1021.155556c5.688889 0 8.533333-2.844444 11.377778-5.688889 2.844444-2.844444 5.688889-8.533333 5.688889-11.377778V640c0-2.844444 0-5.688889-2.844444-5.688889h-5.688889l-122.311111 122.311111-164.977778-164.977778c-2.844444-2.844444-8.533333-5.688889-11.377778-5.688888-5.688889 0-8.533333 2.844444-11.377778 5.688888l-110.933333 110.933334c-2.844444 2.844444-5.688889 8.533333-5.688889 11.377778s2.844444 8.533333 5.688889 11.377777l164.977778 164.977778-119.466667 119.466667c-2.844444 2.844444-2.844444 2.844444 0 5.688889 0 2.844444 2.844444 2.844444 5.688889 2.844444l361.244444 5.688889z")
        button#exitFullScreen.tool-button.float-right(style="display:none" title="退出" type="button")
          svg(svg, xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024")
            path(d="M422.648199 431.157895c5.67313 0 8.509695-2.836565 11.346261-5.67313 2.836565-2.836565 5.67313-8.509695 5.67313-11.346261V51.058172c0-2.836565 0-5.67313-2.836565-5.67313h-5.67313L306.34903 170.193906 141.828255 5.67313C138.99169 2.836565 133.31856 0 130.481994 0c-5.67313 0-11.34626 2.836565-14.182825 5.67313L5.67313 116.299169c-2.836565 2.836565-5.67313 8.509695-5.67313 11.34626 0 5.67313 2.836565 11.34626 5.67313 14.182826L170.193906 303.512465l-119.135734 119.135734c-2.836565 2.836565-2.836565 2.836565 0 5.673131 0 2.836565 2.836565 2.836565 5.67313 2.836565h365.916897z m0 156.01108c5.67313 0 8.509695 2.836565 11.346261 5.67313 2.836565 2.836565 5.67313 8.509695 5.67313 11.346261v365.916897c0 2.836565 0 5.67313-2.836565 5.67313h-5.67313L306.34903 850.969529 141.828255 1015.490305c-2.836565 2.836565-8.509695 5.67313-11.346261 5.67313-5.67313 0-8.509695-2.836565-11.34626-5.67313L8.509695 904.864266c-5.67313-2.836565-8.509695-8.509695-8.509695-11.34626s2.836565-8.509695 5.67313-11.346261L170.193906 717.65097l-119.135734-119.135735c-2.836565-2.836565-2.836565-2.836565 0-5.67313 0-2.836565 2.836565-2.836565 5.67313-2.836565l365.916897-2.836565z m175.867036-156.01108c-5.67313 0-8.509695-2.836565-11.34626-5.67313-2.836565-2.836565-5.67313-8.509695-5.67313-11.346261V51.058172c0-2.836565 0-5.67313 2.836565-5.67313h5.67313L714.814404 170.193906 879.33518 5.67313c2.836565-2.836565 8.509695-5.67313 11.34626-5.67313 5.67313 0 8.509695 2.836565 11.346261 5.67313l110.626039 110.626039c5.67313 2.836565 8.509695 8.509695 8.509695 11.34626 0 5.67313-2.836565 8.509695-5.67313 11.346261L850.969529 303.512465l119.135734 119.135734c2.836565 2.836565 2.836565 2.836565 0 5.673131 0 2.836565-2.836565 2.836565-5.67313 2.836565H598.515235z m0 156.01108c-5.67313 0-8.509695 2.836565-11.34626 5.67313-2.836565 2.836565-5.67313 8.509695-5.67313 11.346261v365.916897c0 2.836565 0 5.67313 2.836565 5.67313h5.67313l121.972299-121.972299 164.520776 164.520776c2.836565 2.836565 8.509695 5.67313 11.34626 5.67313 5.67313 0 8.509695-2.836565 11.346261-5.67313l110.626039-110.626039c2.836565-2.836565 5.67313-8.509695 5.67313-11.34626s-2.836565-8.509695-5.67313-11.346261L850.969529 717.65097l119.135734-119.135735c2.836565-2.836565 2.836565-2.836565 0-5.67313 0-2.836565-2.836565-2.836565-5.67313-2.836565l-365.916898-2.836565z")
        .editor.chatinput(aria-label="input area" contenteditable="true" ref="editor")
        button.send 发送
    // Emoji Mart
    script(src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js")
    script(src="../js/litewebchat_input.min.js")
    // 抽离的聊天信息组件
    script(src="../js/litewebchat_render.min.js")
    script.
      const htmls = [{
      messageType: 'tipsDanger',
      html: '从我做过的类聊天需求来看，聊天消息要么是纯文本，要么是富文本。text 类型是纯文本, raw 类型是富文本。'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      html: '这是什么什么鬼？'
      }, {
      messageType: 'raw',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: 'LiteChat_Frame（轻聊天气泡框架），一个贼简洁 <del>(简单)</del> 、美观、易用的 HTML 聊天界面框架',
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: '它简洁而不简单，能使你开发聊天界面更快速'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      html: '直接说，气泡是谁的？'
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      htitleType: 'admin',
      htitle: 'admin',
      html: '好吧，气泡css来自 Haswikr的 Blog 的机器人气泡 😝',
      }, {
      messageType: 'text',
      headIcon: '../images/H.jpg',
      name: 'Haswikr',
      position: 'left',
      htitleType: 'admin',
      htitle: 'admin',
      html: '当初调色煞费苦心'
      }, {
      messageType: 'text',
      headIcon: '../images/O.jpg',
      name: 'Sonui',
      position: 'left',
      htitleType: 'owner',
      htitle: 'owner',
      html: '这设计真棒'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      htitle: 'menber123456789789',
      html: '那咋用啊？'
      }, {
      messageType: 'raw',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: `<del>诶哟少年你找对人了</del><br/><br/>如果只是使用，那非常简单。<h2>使用指北</h2><br/>1. 引用 css： litechat.css<br/><br/>&lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.css&quot; rel=&quot;stylesheet&quot; /&gt;<br/>或<br/>&lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.min.css&quot; rel=&quot;stylesheet&quot; /&gt;<br/><br/>2. 创建一个 DIV ，用来容纳聊天对话，目的是不让 css 干扰页面其他内容：<br/><br/>&lt;div class=&quot;lite-chatbox&quot;&gt;<br/>...<br/>&lt;/div&gt;<br/><br/>话说你就不会看下源码吗...<b>楼下是特性演示</b>`
      }, {
      messageType: 'tipsNormal',
      html: 'Chenjunyu19 退出了聊天室并撩了你一把'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: '空消息测试1',
      position: 'left',
      html: ''
      }, {
      messageType: 'raw',
      headIcon: '../images/B.jpg',
      name: '空消息测试2',
      position: 'right',
      html: '&nbsp;'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      html: '注意，上面两条空消息的消息内容代码不一样？'
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: '头像换成方形请去掉 radius ;我认为应该不会有方形的。so....自己动手丰衣足食吧（F12）'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      diamond: true,
      html: '我是左边的方形头像'
      }, {
      messageType: 'raw',
      headIcon: '../images/B.jpg',
      name: '图片消息',
      position: 'right',
      html: '<img src="../images/img2.png">',
      }, {
      messageType: 'raw',
      headIcon: '../images/A.jpg',
      name: '图片消息2',
      position: 'left',
      html: `<img src="../images/img.png"><br>图片带文字是可以的 <del>（废话）</del>`,
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: '右边长消息',
      position: 'right',
      html: '我的消息真的超级长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长欸'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: '左边长消息',
      position: 'left',
      html: '这么巧鸭，我的也超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超级长的欸\n'
      }, {
      messageType: 'tipsDanger',
      html: '系统消息：左/右边长消息被管理员批判一番……'
      }, {
      messageType: 'tipsNormal',
      html: '系统消息：normal'
      }, {
      messageType: 'tipsPrimary',
      html: '系统消息：primary'
      }, {
      messageType: 'tipsSuccess',
      html: '系统消息：success'
      }, {
      messageType: 'tipsInfo',
      html: '系统消息：info'
      }, {
      messageType: 'tipsWarning',
      html: '系统消息：warning'
      }, {
      messageType: 'tipsDanger',
      html: '系统消息：danger'
      }, {
      messageType: 'raw',
      headIcon: '../images/B.jpg',
      name: '带有超链接的消息测试',
      position: 'right',
      html: `当然是可以有超链接的。例子在这里：<br><a href="http://morfans.cn" target="_blank">你敢点我吗</a> ← 戳这里`,
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: '全符号测试',
      position: 'left',
      html: '。，；？：！‘’“”@ˆ.,;?:!\'"〝〞﹫ˇ'
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: '全emoji测试',
      position: 'left',
      html: `😀😝🐂🍺`
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: '',
      position: 'right',
      html: `当无昵时候, name 字段留空即可`
      }, {
      messageType: 'text',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: `换行用可以用 <br>
      也可以直接换..`
      }, {
      messageType: 'text',
      headIcon: '../images/A.jpg',
      name: 'chenjunyu19',
      position: 'left',
      html: `以上就是全部的特性，以后有空再更`
      },{
      messageType: 'raw',
      htitleType: 'owner',
      htitle: 'NEW',
      headIcon: '../images/B.jpg',
      name: 'SuperPaxxs',
      position: 'right',
      html: 'LiteChat_Frame 拥有暗色模式,快来试试吧:<br\/><br\/><style>.theme-switch{background: none;border: solid 1px;border-radius: 2em;font: inherit;cursor: pointer;color: #fff;}<\/style><button class="theme-switch">切换配色 <\/button>',
      }, ];
      beforeRenderingHTML(htmls, '.lite-chatbox');
    script.
      const btns = document.querySelectorAll('.theme-switch');
      const html = document.documentElement;

      const addEvent = btn => {
        btn.addEventListener('click', e => {
          let theme = html.getAttribute("litewebchat-theme");
          if (theme === 'dark') {
            html.setAttribute("litewebchat-theme", 'light');
          } else {
            html.setAttribute("litewebchat-theme", 'dark');
          }
        });
      };
      btns.forEach(btn => {
        addEvent(btn);
      });
    script.
      document.querySelector('.send').onclick = function() {
        htmls.push({
          messageType: 'raw',
          headIcon: '../images/B.jpg',
          name: 'SuperPaxxs',
          position: 'right',
          html: document.querySelector('.chatinput').innerHTML
        })
        document.querySelector('.chatinput').innerHTML = '';
        beforeRenderingHTML(htmls, '.lite-chatbox');
      };
      // 设置发送文件
      inputFile({
        // 允许发送文件
        enable: true,
        // 允许在输入框处拖拽发送文件
        enableDrop: true,
        maxImageSize: 1024 * 1024 * 10, // 图片最大10MB，超过了就要用文件发送，默认为-1（无限制），可以不设置
        maxImageNumber: 20, // 输入框内最多同时存在20张图片，默认为-1（无限制），可以不设置
        // 负责发送文件的函数（回调函数），file为传回的文件信息，与使用<input>标签获得的相同
        sendFileFunc: function(file) {
          alert(file.name);
          // console.log(file);
        }
      });
